import React,{memo,useRef,useEffect} from 'react';
import '../../../assets/Layout/rizhi.scss'
import { Input, Select, Checkbox, Button } from 'antd'
import {AiEditor} from "aieditor";
import "aieditor/dist/style.css"
import HeaderBox from '../../../components/imHeade'
import { CopyOutlined } from '@ant-design/icons'

function AddRz(){
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
  //定义 ref
  const divRef = useRef(null);

  //初始化 AiEditor
  useEffect(() => {
    if (divRef.current) {
      const aiEditor = new AiEditor({
        element: divRef.current,
        placeholder: "点击输入内容...",
        toolbarKeys:["undo", "redo", "brush", "eraser",
          "|", "heading", "font-family", "font-size",
          "|", "bold", "italic", "underline", "strike", "link", "code", "subscript", "superscript", "hr", "todo", "emoji",
          "|", "highlight", "font-color",
          "|", "align", "line-height",
          "|", "bullet-list", "ordered-list", "indent-decrease", "indent-increase", "break",
          "|", "image", "video", "attachment", "quote", "code-block", "table",
          "|", "printer", "fullscreen"
        ],
      })
      return ()=>{
        aiEditor.destroy();
      }
    }
  }, [])

  const onChange: CheckboxProps['onChange'] = (e) => {
    console.log(`checked = ${e.target.checked}`);
  };

  return <>
    <HeaderBox props={{text:"新增日志"}}>
      <Button type="primary"><i className="iconfont mt-add"></i> 提交</Button>
      <Button type="link"><CopyOutlined />草稿</Button>
    </HeaderBox>
     <div className="addRz-main">
          <div className="addRz-top">
            <div className="addRz-title">日志标题</div>
            <Input className="addRz-input" placeholder="请输入日志标题" />
            <Checkbox className="checkbox" onChange={onChange}>私密日记</Checkbox>
          </div>
       <div className="addRz-top">
         <div className="addRz-title">日志分类</div>
         <Select
           className="addRz-input"
           onChange={handleChange}
           placeholder="请选择日志分类"
           options={[
             { value: 'jack', label: 'Jack' },
             { value: 'lucy', label: 'Lucy' },
             { value: 'Yiminghe', label: 'yiminghe' },
           ]}
         />
       </div>
       <div className="addRz-cont" ref={divRef} ></div>
     </div>
  </>
}

export  default  memo(AddRz)
